<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>最新路况指数</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="css/index1.css">
    
    <!-- <script src="js/jquery.js"></script> -->
	
	<!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
	
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--    <script type="text/javascript"-->
<!--            src="http://webapi.amap.com/maps?v=1.3&key=78d2c8a55b62cb049653ace920a563dc"></script>-->
    <!-- 下一行是左边的放大缩小移动操作台 -->
<!--    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>-->
<!-- <script src="/js/jquery.js"></script> -->
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>

</head>
<style>
    #up-map-div{
        width:300px;
        height:260px;
        top:210px;
        right:0px;
        position:absolute;
        z-index:9999;
        border:1px solid blue;
        background-color:#FFFFFF;
    }
</style>
<body>
<div id="container">
    <h2 style="position: absolute;z-index:9999; left: 650px;margin-top: 50px;color: white">成都市最新路况指数</h2>
<div id="up-map-div" style="filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;background-color: #0c0c0c">
	 <div class="center" >
	 	<div class="title" style="font-size: medium;left: 75px;" >实时交通指数总览</div>
            <div id="main" style="width: 600px;height:400px;" >
				<div id="main_chart" style="width: 270px; height: 270px;"></div>
			</div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
		        // 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main_chart'));

		        // 指定图表的配置项和数据
				 option = {

					 series: [

					 {

						 type: 'gauge',
						 axisLine: {
							 lineStyle: {
								 width: 20,
								 color: [
									 [0.3, '#67e0e3'],
									 [0.7, '#37a2da'],
									 [1, '#fd666d']
								 ]
							 }
						 },
						 pointer: {
							 itemStyle: {
								 color: 'auto'
							 }
						 },
						 axisTick: {
							 distance: -30,
							 length: 8,
							 lineStyle: {
								 color: '#fff',
								 width: 2
							 }
						 },
						 splitLine: {
							 distance: -30,
							 length: 1,
							 lineStyle: {
								 color: '#fff',
								 width: 4
							 }
						 },
						 axisLabel: {
							 color: 'auto',
							 distance: 23,
							 fontSize: 10
						 },
						 detail: {
							 valueAnimation: true,
							 formatter: '指数:{value} \n\n重度拥堵' ,

							 color: 'auto',
							 fontSize: 15
						 },
						 data: [
						 {
							 value:78

						 }]


					 }]
				 };
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
		    </script>
<!-- <script type="text/javascript" src="js/echarts.js"></script> -->
<script src="https://webapi.amap.com/loader.js"></script>
<script>
    AMapLoader.load({ //首次调用 load
        key:'78d2c8a55b62cb049653ace920a563dc',//首次load key为必填
        version:'1.4.15',
        Loca:{
            version: '1.3.2',
        }
    }).then((AMap)=>{
        map = new AMap.Map('container',{
            mapStyle: 'amap://styles/951f4909fcd4794ff20d021aa41bf369',
            zoom: 15,
        });

        var layer = new Loca.PointLayer({
            map: map,
        });

        layer.setData(districts, {
            // 指定经纬度所在字段
            lnglat: 'center'
        });
        layer.setOptions({
            style: {
                // 圆形半径，单位像素
                radius: 12,
                // 填充颜色
                color: '#ff0026',
                // 描边颜色
                borderColor:"#ff0026",
                // 描边宽度，单位像素
                borderWidth: 1,
                // 透明度 [0-1]
                opacity: 0.9,
            }
        });
        layer.render();
    }).catch((e)=>{
        console.log(e);
    });

</script>
<script src="js/fontscroll.js"></script>
<script src="js/zuobiao.js"></script>

</body>

</html>
 